<template>
<!-- 数据统计 -->
<div>
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-body" style="height: 35px; vertical-align: middle;padding:10px;">
                <label>{{$t('num_shebeitj')}}</label>
            </div>
            <div class="panel-footer" style="background-color:#fff">
                <div style="padding-left:0px;">
                    <div style="display:inline-block;width:30%">
                        <center>
                            <h1 id="devicecount" style="color:#0094ff">0</h1>
                            <label>{{$t('num_sbtj0_zs')}}</label>
                        </center>
                    </div>
                    <div style="display: inline-block; width: 30%">
                        <center>
                            <h1 style="color:#ff6a00" id="offlinecount">0</h1>
                            <label>{{$t('num_sbtj1_lx')}}</label>
                        </center>
                    </div>
                    <div style="display: inline-block; width: 30%">
                        <center>
                            <h1 id="onlinecount" style="color:#0094ff">0</h1>
                            <label>{{$t('num_yhgl0_zx')}}</label>
                        </center>
                    </div>
                    <div style="display: inline-block; width: 30%">
                        <center>
                            <h1 id="excetioncount" style="color:#0094ff">0</h1>
                            <label>{{$t('num_sbtj0_yc')}}</label>
                        </center>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-body" style="height: 35px; vertical-align: middle;padding:10px;">
                <label>{{$t('num_xiafajm')}}</label>
            </div>
            <div class="panel-footer" style="background-color:#fff">
                <div style="padding-left:0px;">
                    <div style="display:inline-block;width:30%">
                        <center>
                            <h1 id="xy" style="color:#0094ff">0</h1>
                            <label>{{$t('num_sbtj0_zs')}}</label>
                        </center>
                    </div>
                    <div style="display: inline-block; width: 30%">
                        <center>
                            <h1 style="color:#ff6a00" id="xycy">0</h1>
                            <label>{{$t('num_xf0_xfcg')}}</label>
                        </center>
                    </div>
                    <div style="display: inline-block; width: 30%">
                        <center>
                            <h1 id="xygy" style="color:#0094ff">0</h1>
                            <label>{{$t('num_xf1_xfz')}}</label>
                        </center>
                    </div>
                    <div style="display: inline-block; width: 30%">
                        <center>
                            <h1 id="xygg" style="color:#0094ff">0</h1>
                            <label>{{$t('num_xf2_xfyc')}}</label>
                        </center>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-body" style="height: 35px; vertical-align: middle;padding:10px;">
                <label>{{$t('num_dingdan')}}</label>
            </div>
            <div class="panel-footer" style="background-color:#fff">
                <div style="padding-left:0px;">
                    <div style="display:inline-block;width:30%">
                        <center>
                            <h1 id="sygl" style="color:#0094ff">0</h1>
                            <label>{{$t('num_sbtj0_zs')}}</label>
                        </center>
                    </div>
                    <div style="display: inline-block;width:30%">
                        <center>
                            <h1 style="color:#0094ff" id="xygl">0</h1>
                            <label>{{$t('num_da0_yshdd')}}</label>
                        </center>
                    </div>
               <div style="display: inline-block;width:30%">
                        <center>
                            <h1 style="color:#0094ff" id="xygl">0</h1>
                            <label>{{$t('num_wshdd')}}</label>
                        </center>
                    </div>
 <div style="display: inline-block;width:30%">
                        <center>
                            <h1 style="color:#0094ff" id="xygl">0</h1>
                            <label>{{$t('num_da1_btg')}}</label>
                        </center>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-body" style="height: 35px; vertical-align: middle;padding:10px;">
                <label>{{$t('num_yhgl')}}</label>
            </div>
            <div class="panel-footer" style="background-color:#fff">
                <div style="padding-left:0px;">
                    <div style="display:inline-block;width:30%">
                        <center>
                            <h1 id="sygl" style="color:#0094ff">0</h1>
                            <label>{{$t('num_sbtj0_zs')}}</label>
                        </center>
                    </div>
                    <div style="display: inline-block;width:30%">
                        <center>
                            <h1 style="color:#0094ff" id="xygl">0</h1>
                            <label>{{$t('num_yhgl0_zx')}}</label>
                        </center>
                    </div>
                       <div style="display: inline-block;width:30%">
                        <center>
                            <h1 style="color:#0094ff" id="xygl">0</h1>
                            <label>{{$t('num_yhgl1_ty')}}</label>
                        </center>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</template>
<style>
 /*@import '../../../static/css/home/bootstrap.min.css';*/
 </style>
<script>
export default {
    data(){
        return{
        }
    },
     mounted(){
      //   sessionStorage.setItem("Load","123");
       // domain.staticzt=false;
     }
};
$(function(){
  $.ajax({
        type: 'POST',
		url: domain.testUrl+"/Threeinjection/index/deviceStatistics",
		data:{"coid":sessionStorage.getItem("coid"),sessionid:sessionStorage.getItem("sid")},
     success: function (response) {
    
    var json=JSON.parse(response);
    json=json.deviceCount;
    //alert(json);
         //console.log(response);


$("#devicecount").text(json.devicecount);
   $("#excetioncount").text(json.excetioncount);   $("#onlinecount").text(json.onlinecount);

     $("#offlinecount").text(json.offlinecount);
    // {"deviceCount":{"devicecount":12,"excetioncount":1,"onlinecount":1,"offlinecount":0}}


      




     }
});
});
</script>




